<template>
  <div v-loading="listLoading" style="min-height: 100px;">
    <el-table
      v-if="list.items.length > 0"
      ref="projectChannelTable"
      :data="list.items"
      :row-class-name="tableRowClassName"
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row
      @select="selectTable"
      @select-all="selectAllTable">
      <el-table-column
        align="center"
        type="selection"
        width="50"
        fixed="left"
      />
      <el-table-column align="left" label="订单编号" width="190">
        <template slot-scope="scope">
          <ToolTip v-if="scope.row.orderInfo.orderId" :content="scope.row.orderInfo.orderId">
            <router-link
              :to="{name: 'projectChildDetail', params: { id: scope.row.orderInfo.id }}"
              target="_blank"
              class="overflow ellipsis"
              style="color:#406EFF"
            >{{ scope.row.orderInfo.orderId }}</router-link>
          </ToolTip>
          <div v-else style="color:#406EFF; cursor: pointer" @click="goOrderDetail(scope.row.orderInfo.id)">--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="下单日期" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.orderInfo.orderTime">{{ scope.row.orderInfo.orderTime | standardFormatNoHour('YYYY/MM/DD') }}</div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="项目名称" width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.projectName"/>
        </template>
      </el-table-column>
      <el-table-column align="left" label="项目类型" min-width="110">
        <template slot-scope="scope">
          {{ scope.row.orderInfo.projectTypeStr || '--' }}
        </template>
      </el-table-column>
      <el-table-column align="right" label="含税金额(元)" width="130">
        <template slot-scope="scope">
          <span v-if="scope.row.orderInfo.taxAmount || scope.row.orderInfo.taxAmount === 0">
            {{ (scope.row.orderInfo.taxAmount / 100) | moneyFilter }}
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="账号" width="140">
        <template slot-scope="scope">
          <div class="flex-center">
            <frameContent
              v-if="scope.row.dataAccount"
              ref="frameContent"
              :platform="scope.row.orderInfo.orderPlatform"
              :data-account="scope.row.dataAccount"
              :url="scope.row.dataLink"
              :account-id="scope.row.orderInfo.resourceId"
              :account-name="scope.row.orderInfo.resourceName" />
            <resource-info
              v-if="scope.row.orderInfo.resourceName"
              :resource-name="scope.row.orderInfo.resourceName"
              :account-name-organization="scope.row.accountNameOrganization"
              :account-name-platform="scope.row.accountNamePlatform"
              :resource-id="scope.row.orderInfo.resourceCode"
              style="max-width:calc(100% - 20px)"
              account-belong-name="none"
            />
            <div v-else>--</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="下单平台" width="130">
        <template slot-scope="scope">
          <div class="flex-center">
            <PlatformIcon :data="scope.row.orderInfo.orderPlatform" />
            {{ scope.row.orderInfo.orderPlatform || '--' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="品牌名称" min-width="110">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.orderInfo.theme"/>
        </template>
      </el-table-column>
      <el-table-column align="left" label="下单形式" min-width="110">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.orderInfo.orderForm"/>
        </template>
      </el-table-column>
      <el-table-column align="left" label="所属部门" width="110">
        <template slot-scope="scope">
          <ToolTip
            v-if="scope.row.orderInfo.attributionMatrixName"
            :content="(scope.row.orderInfo.attributionMatrixFullName || scope.row.orderInfo.attributionMatrixName) | getDeptFullName">
            <div class="overflow ellipsis">{{ scope.row.orderInfo.attributionMatrixName }}</div>
          </ToolTip>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="账号归属" min-width="110">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.orderInfo.accountBelongName"/>
        </template>
      </el-table-column>
      <el-table-column align="left" label="执行人" min-width="110">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.orderInfo.accountOperationList"/>
        </template>
      </el-table-column>
      <el-table-column align="left" label="销售" min-width="110">
        <template slot-scope="scope">
          <span v-if="scope.row.clientInfo">{{ scope.row.clientInfo.market || '--' }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
    </el-table>
    <empty-placeholder v-else style="margin-bottom: 24px" />
  </div>
</template>

<script>
import tableSelections from '../mixins/relatedSelection';
import { standardFormatNoHour } from '@/filters/date';
import { moneyFilter } from '@/filters/number';
import { getDeptFullName } from '@/filters/dept';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import frameContent from '@/components/Common/frameContent';
import ResourceInfo from '@/components/ResourceInfo';
import PlatformIcon from '@/components/Common/platformIcon';
export default {
  name: 'ProjectChannelOrder',
  filters: {
    standardFormatNoHour,
    getDeptFullName,
    moneyFilter
  },
  components: {
    EmptyPlaceholder,
    ResourceInfo,
    PlatformIcon,
    frameContent
  },
  mixins: [tableSelections],
  props: {
    listLoading: {
      type: Boolean,
      default: false
    },
    list: {
      type: Object | Array,
      default: () => {
        return {};
      }
    },
    selectCallback: {
      type: Boolean,
      default: false
    },
    isSelectedOrder: { // 是否为已选择订单
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      idKey: 'id',
      primaryId: 'relatedId',
      tableRefName: 'projectChannelTable'
    };
  },
  watch: {
    list: {
      handler: function(data) {
        this.$nextTick(() => {
          if (this.setSelectRow) this.setSelectRow(data.items);
        });
      },
      deep: true
    }
  },
  methods: {
    goOrderDetail(id) {
      if (!id) {
        this.$message.warning('无效id');
        return;
      }
      const routeUrl = this.$router.resolve({
        name: 'projectChildDetail',
        params: { id: id }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>

<style scoped lang="scss">
.table-selected {
  td {
    background-color: #F3F5FB;
  }
}
</style>
